<!DOCTYPE html>
<html>
<head>
  <title>Froala Design Blocks - Teams</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />

  <script src="http://localhost:35729/livereload.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">

  <style>
    .fdb-block {
      border-bottom: solid 1px #EEE;
    }
  </style>
</head>
<body>
  <section class="fdb-block team-1">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Our Team</h1>
          <p class="text-h3">Far far away, behind the word mountains, far from the countries.</p>
        </div>
      </div>

      <div class="row-50"></div>

      <div class="row">
        <div class="col-sm-3 text-left">
          <div class="fdb-box">
            <img alt="image" class="img-fluid" src="./imgs/img_square_1.svg">

            <div class="content">
              <h3><strong>Sara Doe</strong></h3>
              <p>Founder</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 text-left">
          <div class="fdb-box">
            <img alt="image" class="img-fluid" src="./imgs/img_square_2.svg">

            <div class="content">
              <h3><strong>Sara Doe</strong></h3>
              <p>Founder</p>
            </div>
          </div>
        </div>
        <div class="col-sm-3 text-left">
          <div class="fdb-box">
            <img alt="image" class="img-fluid" src="./imgs/img_square_3.svg">

            <div class="content">
              <h3><strong>Sara Doe</strong></h3>
              <p>Founder</p>
            </div>
          </div>
        </div>
        <div class="col-sm-3 text-left">
          <div class="fdb-box">
            <img alt="image" class="img-fluid" src="./imgs/img_square_4.svg">

            <div class="content">
              <h3><strong>Sara Doe</strong></h3>
              <p>Founder</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-2">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Meet Our Team</h1>
        </div>
      </div>

      <div class="row-50"></div>

      <div class="row text-center justify-content-center">
        <div class="col-sm-3 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h2>Sara Doe</h2>
          <p>Founder</p>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h2>Sara Doe</h2>
          <p>Founder</p>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h2>Sara Doe</h2>

          <p>Founder</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-3">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Meet Our Team</h1>
        </div>
      </div>

      <div class="row-70"></div>

      <div class="row text-center justify-content-center">
        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>
      </div>

      <div class="row justify-content-center text-center">
        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p><em>Founder</em></p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-4">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Team</h1>
        </div>
      </div>

      <div class="row text-center">
        <div class="col-3">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>A wonderful serenity has taken possession of my entire soul.</p>
        </div>

        <div class="col-3">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>Pityful a rethoric question ran over her cheek.</p>
        </div>

        <div class="col-3">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>And if she hasn’t been rewritten, then they are still using her.</p>
        </div>

        <div class="col-3">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>Wild Question Marks, but the Little Blind Text didn’t listen.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-5">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Meet Our Team</h1>
        </div>
      </div>

      <div class="row-70"></div>

      <div class="row text-center justify-content-center">
        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>
      </div>

      <div class="row justify-content-center text-center">
        <div class="col-sm-2  m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>

        <div class="col-sm-2 m-sm-auto">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg">

          <h3><strong>Sara Doe</strong></h3>
          <p>"Wild Question Marks, but the Little Blind"</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-6">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Team</h1>
        </div>
      </div>

      <div class="row text-center">
        <div class="col-4">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </div>

        <div class="col-4">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>One morning, when Gregor Samsa woke from troubled dreams.</p>
        </div>

        <div class="col-4">
          <img alt="image" class="img-fluid" src="./imgs/colors_wide_1.jpg">
          <h3><strong>John Smith</strong></h3>
          <p>Position</p>
          <p>A small river named Duden flows by their place and supplies it.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-7">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Team</h1>
        </div>
      </div>

      <div class="row-70"></div>

      <div class="row justify-content-center">
        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row-50"></div>

      <div class="row justify-content-center">
        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row-50"></div>

      <div class="row justify-content-center">
        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>

        <div class="col-sm-3 m-sm-auto">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3>Employee Name</h3>
              <p>Position</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block team-8">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8">
          <h1>Our Amazing Team</h1>
          <p class="text-h3">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
        </div>
      </div>

      <div class="row-100"></div>

      <div class="row justify-content-center text-left">
        <div class="col-sm-6">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3><strong>Employee Name</strong></h3>
              <p class="text-h3">Position</p>

              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3><strong>Employee Name</strong></h3>
              <p class="text-h3">Position</p>

              <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row-70"></div>

      <div class="row justify-content-center text-left">
        <div class="col-sm-6">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3><strong>Employee Name</strong></h3>
              <p class="text-h3">Position</p>

              <p>One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="row align-items-center">
            <div class="col-4">
              <img alt="image" class="img-fluid" src="./imgs/img_round.svg">
            </div>

            <div class="col-8">
              <h3><strong>Employee Name</strong></h3>
              <p class="text-h3">Position</p>

              <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>
